<template>
    <h2>基础</h2>
    <div class="tw:flex tw:gap-2">
        <div class="tw:h-8 tw:w-64 tw:flex-none tw:bg-sky-300 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:h-8 tw:w-64 tw:shrink tw:bg-sky-500 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
        <div class="tw:h-8 tw:w-64 tw:flex-none tw:bg-sky-300 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
    </div>
    <h2>份数</h2>
    <div class="tw:flex tw:flex-row tw:gap-2">
        <div class="tw:h-8 tw:w-64 tw:shrink-3 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">01</div>
        <div class="tw:h-8 tw:w-64 tw:shrink-7 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">02</div>
        <div class="tw:h-8 tw:w-64 tw:shrink-3 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">03</div>
    </div>
    <div class="tw:flex tw:flex-row tw:gap-2 tw:mt-4">
        <div class="tw:h-8 tw:w-64 tw:shrink-3 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">01</div>
        <div class="tw:h-8 tw:w-64 tw:shrink-0 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">02</div>
        <div class="tw:h-8 tw:w-64 tw:shrink-3 tw:bg-blue-500 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:font-bold tw:text-white">03</div>
    </div>
</template>